<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表达式小结</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      //声明虚拟 DOM 对象   JSX 中的大括号里可以编写 JS 的表达式
      //1. 字面量    string number boolean undefined null symbol => s n b u o => usonb
      // let h1 = <h1>{undefined}</h1>; // X
      // let h1 = <h1>{'i love you'}</h1>; // √
      // let h1 = <h1>{Symbol()}</h1>; // X
      // let h1 = <h1>{{a: 100}}</h1>; // X  这里会报错
      // let h1 = <h1>{5211314}</h1>; // √
      // let h1 = <h1>{null}</h1>; // X
      // let h1 = <h1>{true}</h1>; // X
      // let h1 = <h1>{false}</h1>; // X
      // let h1 = <h1>{123}</h1>;
      // let h1 = <h1>{[1,2,3]}</h1>;
      // let h1 = <h1>{[1,true,3]}</h1>;
      // let h1 = <h1>{[1,true,undefined]}</h1>;
      // let h1 = <h1>{[1,true, {a: 100}]}</h1>; //X 报错
      // let h1 = <h1>{['abc', 'xyz', 'xxx']}</h1>; // √
      //虚拟 DOM 对象的情况   √
      // let vnode = [<a href="http://www.baidu.com">测试xxx</a>, <span>测试2</span>, <i>测试3</i>]
      // let div = <div>
      //     {vnode}
      //   </div>
      // ReactDOM.render(div, document.querySelector('#root'));

      //2. 声明一个变量
      // let v = '测试';
      // let v = 12314121;
      // let v = [1,2,3,4];
      // let v = {b: 200}; // X 会报错
      // let v = undefined;
      // let h2 = <h2>{v}</h2>;

      //3. 对象属性
      // let obj = {
      //   a: 100,
      //   b: 'love',
      //   c: [1,2,3,4]
      // };

      // let h3 = <h3>{obj.a}</h3>;
      // let h3 = <h3>{obj.b}</h3>;
      // let h3 = <h3>{obj.c}</h3>;

      //4. 运算
      // let h3 = <h3>{100 + 200 - 300}</h3>;
      // let h3 = <h3>{'有些人，' + '一旦错过就不在'}</h3>;
      // let h3 = <h1>{1 ? 2 : 3}</h1>;
      // let h3 = <h1>{'love' && 'like'}</h1>;
      // let h3 = <h1>{'love' || 'like'}</h1>;
      // let h3 = <h1>{0 && 'like'}</h1>;

      //5. 函数调用
      let fn = () => {
        // return <span>测试 SPAN 哦</span>;
        return [1,2,3];
      }
      // let h3 = <h1>{'离离原上草，一岁一枯荣'.split('，')}</h1>;
      let h3 = <h1>{fn()}</h1>;

      ReactDOM.render(h3, document.querySelector('#root'));

    </script>
  </body>
</html>
